<template>
	<tm-fullView>
		<tm-menubars title="相册集" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-32">基本示例</view>
			<tm-album  :list="list"></tm-album>
		</tm-sheet>
		
		<tm-sheet :shadow="24" :padding="[24,32]">
			<view class="text-size-s text-weight-b mb-32">可以调整间距，利用插槽添加操作按钮或者增加标题</view>
			<tm-album :max="6" :gutter="10" :round="0" :grid="3" :list="list2">
				<template #actions="{item}" >
					<view class=" d-inline-block" @click.stop.prevent="$tm.toast('收藏成功')">
						<tm-button theme='white' :icon-size="42" size="s" fab titl icon="icon-collection"></tm-button>
					</view>
				</template>
			</tm-album>
		</tm-sheet>
	</tm-fullView>
</template>

<script>

import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmAlbum from '@/tm-vuetify/components/tm-album/tm-album.vue';
export default {
	components: {  tmMenubars, tmFullView, tmSheet, tmButton,tmAlbum },
	data() {
		return {
			active: 2,
			list:[],
			list2:[],
		};
	},
	created(){
		let p = [];
		for (var i = 0; i < 8; i++) {
			p.push(`https://picsum.photos/300?k=${i}`)
		}
		this.list = p;
		p = [];
		for (var i = 0; i < 6; i++) {
			p.push({
				src:`https://picsum.photos/300?k=${i}`,
				text:`标题${i}`
			})
		}
		this.list2 = p;
	}
};
</script>

<style lang="scss"></style>
